<template>
<div class="container">
  <div class="info">
    <span class="words">信息查询</span>
   <!--信息查询表单-->
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <!--库存流水id输入框-->
  <el-form-item label="库存流水ID" prop="id" >
    <el-input v-model="ruleForm.id" style="width:250px"></el-input>
  </el-form-item>
    <!--来源单据类型选择框-->
  <el-form-item label="来源单据类型" prop="region1" style="width:250px">
    <el-select v-model="ruleForm.region1" placeholder="全部">
      <el-option label="类型一" value="shanghai"></el-option>
      <el-option label="类型二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
      <!--商品编码输入框-->
  <el-form-item label="商品编码" prop="code" >
    <el-input v-model="ruleForm.code" style="width:250px"></el-input>
  </el-form-item>
      <!--创建日期选择框-->
  <el-form-item label="创建日期" :inline="true" >
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date"  v-model="ruleForm.date1" class="el-date-picker"></el-date-picker>
        <el-date-picker type="date"  v-model="ruleForm.date2" class="el-date-picker"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2"> 
    </el-col>
  </el-form-item>
  <!--选择商家栏-->
    <el-form-item label="商家" prop="region2" style="width:250px" id="shops">
    <el-select v-model="ruleForm.region2" placeholder="全部">
      <el-option label="商家一" value=""></el-option>
      <el-option label="商家二" value=""></el-option>
    </el-select>
  </el-form-item>
  <!--单据编号-->
    <el-form-item label="单据编号" prop="sheetCode"  id="sheetCode">
      <el-input v-model="ruleForm.sheetCode" style="width:250px"></el-input>
    </el-form-item>
   <!--操作类型栏-->
    <el-form-item label="操作类型" prop="region3" style="width:250px" id="behaviorKinds">
    <el-select v-model="ruleForm.region3" placeholder="请选择">
      <el-option label="类型一" value=""></el-option>
      <el-option label="类型二" value=""></el-option>
    </el-select>
  </el-form-item> 
    <!--选择仓库栏-->
    <el-form-item label="仓库" prop="region4" style="width:250px" id="repertory">
    <el-select v-model="ruleForm.region4" placeholder="请选择">
      <el-option label="仓库一" value=""></el-option>
      <el-option label="仓库二" value=""></el-option>
    </el-select>
  </el-form-item>
  <!--商品名称-->
    <el-form-item label="商品名称" prop="productName" id="productName">
      <el-input v-model="ruleForm.productName" style="width:250px"></el-input>
    </el-form-item>
  <!--实际处理数量栏-->
      <div id="handleCount" >
        <el-form-item prop="number1" label="实际处理数量" :inline="true">
          <el-input  v-model="ruleForm.number1" style="width: 100%;"></el-input>
          <span>-</span>
           <el-input v-model="ruleForm.number2" style="width: 100%;"></el-input>
        </el-form-item>
          
        <!-- <el-form-item prop="number2" id='number2'>
         
        </el-form-item> -->
    </div>
  <!--底部按钮栏-->
  <el-form-item class="formFooter">
    <el-button type="primary" @click="submitForm('ruleForm')" class="button1">查询</el-button>
    <el-button @click="resetForm('ruleForm')" class="button2">重置</el-button>
  </el-form-item>
</el-form>
    </div>
    <!--间隔栏-->
    <div class="spacer"></div>
    <!--信息展示栏-->
    <div class="infoShow">
    <!--导出按钮-->
    <el-button type="primary" class="output" size="small">导出</el-button>
    <!--查看任务按钮-->
    <el-button type="primary" class="missonWatch" size="small">查看任务</el-button>
    <!--信息表格-->
          <el-table
        :data="tableData"
        border
        style="width: 100%;"
        stripe
        >
        <el-table-column
          type="selection"
            width="55" >
          </el-table-column>
        <el-table-column
          prop="id"
          label="库存流水ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="shops"
          label="商家"
          width="180">
        </el-table-column>
        <el-table-column
          prop="rcode"
          label="仓库编码">
        </el-table-column>
        <el-table-column
          prop="rname"
          label="仓库名称">
        </el-table-column>
        <el-table-column
          prop="kinds"
          label="操作类型">
        </el-table-column>
        <el-table-column
          prop="goodsCode"
          label="商品编码">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="unit"
          label="计量单位">
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="styles"
          label="来源单据类型">
        </el-table-column>
        <el-table-column
          prop="sheetCode"
          label="单据编号">
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="创建日期">
        </el-table-column>
        </el-table>
    </div>
    <!--分页器-->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
</div>
</template>
<script>
 export default {
   data(){
     return {
       ruleForm: {
          id: '',
          code:'',
          sheetCode:'',
          productName:'',
          region1: '',
          region2:'',
          region3:'',
          region4:'',
          date1: '',
          date2: '',
          number1:'',
          number2:'',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          checked:false,
        },
        currentPage4: 4,
         tableData: [{
            id: '1',
            shops: '2',
            rcode: '3',
            rname:'4',
            kinds:'5',
            goodsCode:'6',
            goodsName:'7',
            unit:'8',
            number:'9',
            styles:'10',
            sheetCode:'11',
            createDate:'12'
        }, {
            id: '1',
            shops: '2',
            rcode: '3',
            rname:'4',
            kinds:'5',
            goodsCode:'6',
            goodsName:'7',
            unit:'8',
            number:'9',
            styles:'10',
            sheetCode:'11',
            createDate:'12'
        }],
        rules: {
          id: [
            { required: true, message: '请输入库存流水id', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入商品编码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sheetCode: [
            { required: true, message: '请输入单据编号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          productName: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region1: [
            { required: false, message: '请选择来源单据类型', trigger: 'change' }
          ],
          region2: [
            { required: false, message: '请选择商家', trigger: 'change' }
          ],
          region3: [
            { required: false, message: '请选择操作类型', trigger: 'change' }
          ],
          region4: [
            { required: false, message: '请选择仓库', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: false, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: false, message: '请选择时间', trigger: 'change' }
          ],
          number1: [
            { required: false, message: '请输入最少数量', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          number2: [
            { required: false, message: '请输入最大数量', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      };
     },
     methods:{
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
     }
   }
 
 </script>
 <style lang="scss" scoped>
 body{
   padding: 0;
   margin: 0;
 }
  .container{
    background-color: #fff;
    .info{
      .words{
        display: block;
        background-color: rgb(238, 224, 224);
        line-height: 40px;
        font-size: 12px;
        padding-left: 10px;
        margin-bottom: 10px;
        text-align: left;
        font-weight: 700;
        border-radius: 20px;
        padding-left: 20px;
      }
      .demo-ruleForm{
        position: relative;
        margin-left: 200px;
        .el-input__inner{
          // width: 250px;
          height: 30px;
        }
        .el-date-picker{
         width: 125px  ;
          
        }
        .el-input--suffix{
          width: 250px;
        }
        .el-date-editor{
          width: 120px;
        }
        .el-form-item__content{
          width: 17%;
        }
        #sheetCode{
          position: absolute;
          top: 25%;
          left: 30%;
        }
        #shops{
          position: absolute;
          top: 0;
          left: 30%
        }
        #behaviorKinds{
          position: absolute;
          top: 50%;
          left: 30%;
        }
        #repertory{
          position: absolute;
          top: 0;
          left: 60%
        }
        #productName{
          position: absolute;
          top: 25%;
          left: 60%;
        }
        #handleCount{
          position: absolute;
          top: 50%;
          left: 60%;
            .el-form-item{
              width: 70%
            }
        }
        .formFooter{
          width: 100%;
          position: relative;
          display: block;
          .button1{
          position: absolute;
          left: 30%;
          transform: translateX(-50%);
        }
        .button2{
          position: absolute;
          left: 35%;
          transform: translateX(-50%);
        }
        }
        
      }
    }
    .spacer{
      background-color: rgb(238, 224, 224);
      height: 20px;
      margin-top: 50px;
    }
    .infoShow{
      position: relative;
      margin-top: 15px;
      .output{
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }
      .missonWatch{
        float: left;
        margin-bottom: 10px;
      }
    }
    .footer{
      float: right;
    }
  }

 </style>